<template>
    <div class="overdue_box">
        <my-header
        class="page_header"
        ref="header"
        :isBack="true"
        :backText="showTurn?'点巡检转办':'逾期记录'"
        :is_Level_three_page="true"
        :hadInput="false"
        :maxLevelThreePage="true"
        @backFn="back"
        ></my-header>
        <div class="my_dialog"  :style="{top: headerHeight + 'px'}">
            <transition name="slide">
                <div v-if="showTurn">
                    <select-person 
                :offsetTop="headerHeight" 
                selectTitle="选择转办人"
                :turnCheckId="turnCheckId"
                :workSheetType="turnType"
                @closeSelectPersonFn="closeTurnFn"
                @resetUpScroll="resetUpScroll"
                ></select-person>
                </div>
            </transition>
        </div>
        <div class="tab_box" ref="tabBox">
            <tab ref="tab" :line-width="3" :animate="false" active-color="#456de6" default-color="#fff" custom-bar-width="20px" v-model="index">
                <tab-item selected @on-item-click="switchFn">设备逾期</tab-item>
                <tab-item @on-item-click="switchFn">部件逾期</tab-item>
            </tab>
        </div>
        <me-scroll ref="mescroll" class="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit" :style="{top: fixTop + 'px'}">
            <div class="tab_list" v-if="index == 0">
                <loading :inline="false" :size="32" tip="加载中..." :reload="reload" @reloadFn="upCallback"  v-if="showRefresh"></loading>
                <ul>
                    <li v-for="(item, index) in listData" :key="index" @click="showToast(item.checkLeaderIds)">
                        <div class="desc_box">
                            <p class="item_title">名称：{{item.checkType===2?item.deviceName:item.componentName}} 
                                <span class="tag yollow">已逾期</span>
                            </p>
                            <p class="their" v-if="item.checkType === 3">所属设备：{{item.deviceName}}</p>
                            <p class="time">时间：{{item.surplusTime}}</p>
                        </div>
                        <div class="bottom_panel">
                            <div class="operation_per">
                               <p class="person">操作人： <span v-for="(items,index) in item.leaderList" :key="index"
                               ><span v-if="index<2"><span v-if="index!==0">,</span>{{items.name}}</span></span></p>
                            </div>
                            <div class="operation_btn" v-if="hasTag(item.checkLeaderIds)">
                                <button class="btn_1" :class="isActive2 == index?'active':''" @click.stop="chooseTransfer(item, index)">转办</button>
                                <button class="btn_2 yellow" :class="isActive3 == index?'active':''" @click.stop="addDeviceCheck(item, index)">逾期执行</button>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="mescroll-empty" v-if="showEmpty">
                    <img class="empty-icon" src="/static/img/zwlr-icon.png">
                    <p class="empty-tip">暂无内容</p>
                </div>
            </div>
            <div class="tab_list" v-else>
                <loading :inline="false" :size="32" tip="加载中..." :reload="reload" @reloadFn="upCallback"  v-if="showRefresh"></loading>
                <ul>
                    <li v-for="(item, index) in listData" :key="index" @click="showToast(item.checkLeaderIds)">
                        <div class="desc_box">
                            <p class="item_title">名称：{{item.checkType===2?item.deviceName:item.componentName}}
                                <span class="tag yollow">已逾期</span>
                            </p>
                            <p class="their" v-if="item.checkType === 3">所属设备：{{item.deviceName}}</p>
                            <p class="time">时间：{{item.surplusTime}}</p>
                        </div>
                        <div class="bottom_panel">
                            <div class="operation_per">
                               <p class="person">操作人： <span v-for="(items,index) in item.leaderList" :key="index"
                               ><span v-if="index<2"><span v-if="index!==0">,</span>{{items.name}}</span></span></p>
                            </div>
                            <div class="operation_btn" v-if="hasTag(item.checkLeaderIds)">
                                <button class="btn_1" :class="isActive2 == index?'active':''" @click.stop="chooseTransfer(item, index)">转办</button>
                                <button class="btn_2 yellow" :class="isActive3 == index?'active':''" @click.stop="addComponentCheck(item, index)">逾期执行</button>
                            </div>
                        </div>
                    </li>
                </ul>
                
                <div class="mescroll-empty" v-if="showEmpty">
                    <img class="empty-icon" src="/static/img/zwlr-icon.png">
                    <p class="empty-tip">暂无内容</p>
                </div>
            </div>
        </me-scroll>
    </div>
</template>

<script>
import myHeader from '@/components/common/header';
import MeScroll from 'mescroll.js/mescroll.vue'
import loading from '@/components/common/loading'
import selectPerson from '@/components/common/select/selectPerson'
import {Tab, TabItem } from 'vux'
export default {
    components: {
        myHeader,
        Tab,
        TabItem,
        MeScroll,
        loading,
        selectPerson
    },
    data() {
        return{
            index: 0,
            mescroll: null,
            fixTop: null,
            deviceId: '',
            departmentId: '',
            showEmpty: false,
            isActive2: -1,
            isActive3: -1,
            headerHeight: 0,
            mescrollDown:{
                use: true,
                warpClass: 'my-downwarp-normal',
                htmlContent: '<p class="downwarp-progress mescroll-rotate"></p><p class="downwarp-tip">加载中...</p>',
                onMoving: this.onMoving,
                afterLoading: this.showTotalNum,
                offset: 60,
                textOutOffset: '松开刷新'
            }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
            mescrollUp: { // 上拉加载的配置.
                auto: false,
                callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
                //以下是一些常用的配置,当然不写也可以的.
                isBounce: false,
                page: {
                    num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                    size: 20 //每页数据条数,默认10
                },
                htmlNodata: '<p class="myUpwarpNodata">没有更多了</p>',
                noMoreSize: 3, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
                        //避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                        //这就是为什么无更多数据有时候不显示的原因
                toTop: {
                    //回到顶部按钮
                    //src: "./static/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图
                    //offset: 1000 //列表滚动1000px才显示回到顶部按钮
                },
                empty: {
                //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
                    // warpId: "list_content", //父布局的id (1.3.5版本支持传入dom元素)
                    // icon: "./static/img/zwlr-icon.png", //图标,默认null,支持网络图
                    // tip: "暂无内容" //提示
                },
                // warpId: 'upRefreshWarp',
                warpClass: 'myScrollUpRefreshWarp',
                htmlLoading: '<p class="upRefreshProgress refreshRotate"></p> <p class="refresh-tip">加载中...</p>'
            },
            listData: [],
            reload: false,
            showRefresh: false,
            showTurn: false,
            turnCheckId: '',
            turnType: '',
            userId: ''
        }
    },
    beforeRouteEnter (to, from, next) {
        next((vm) => {
            vm.isActive2 = -1
            vm.isActive3 = -1
            if(from.path=='/operaionManage/addCheck'){
                vm.switchFn(vm.index)
            }
        })
    },
    mounted() {
        this.inintMeScrollTop()
        this.headerHeight = this.$refs.header.$el.offsetHeight
        this.$nextTick(() => {
            this.index = parseInt(this.$route.query.tabIndex)
        })
        // 获取userId
        this.$http(this.$API.getUserInfo,{},true).then((res) => {
            this.userId = res.id
        })
    },
    methods: {
        hasTag(checkLeader) {
            if (checkLeader) {
                return checkLeader.split(',').includes(this.userId)
            } else {
              return false;
            }
        },
        // 没权限点击卡片反馈
        showToast(checkLeader) {
            if (checkLeader) {
                if (!checkLeader.split(',').includes(this.userId)) {
                    this.$vux.toast.text('仅可执行的设备和已完成的设备、<br>部件点巡检记录可以查看', 'bottom')
                }
            }
        },
        // 转办
        chooseTransfer(item,index) {
            let type = ''
            if(item.checkType===1){
                type='department'
            }
            else if(item.checkType === 2){
                type = 'device'
            }else{
                type = 'component'
            }
            this.isActive2 = index
            setTimeout(() => {
               this.isActive2 = -1
            }, 200);
            this.showTurnFn(Number(item.id), type)

        },
        showTurnFn(checkId, type) {
            this.showTurn = true
            this.turnCheckId = checkId
            this.turnType = type
        },
        closeTurnFn() {
            this.showTurn = false
        },
        resetUpScroll() {
            this.mescroll.resetUpScroll(false);
        },
        // 添加部件点巡检
        addComponentCheck(config, index) {
            this.isActive3 = index
            setTimeout(() => {
                this.$router.push({
                    path: `/operaionManage/addCheck`,
                    query: {
                        listType: 0,
                        id: config.id,
                        componentId: config.componentId,
                        deviceId: this.deviceId,
                        departmentId: config.departmentId,
                        sheetType: 1, //工单类型 1： 点巡检工单 2：更换工单
                        type: 3 
                    }
                })
            }, 200);
        },
        // 添加设备点巡检
        addDeviceCheck(config, index) {
            this.isActive3 = index
            setTimeout(() => {
                this.$router.push({
                    path: `/operaionManage/addCheck`,
                    query: {
                        listType: 0,
                        id: config.id,
                        deviceId: this.deviceId,
                        departmentId: config.departmentId,
                        sheetType: 1, //工单类型 1： 点巡检工单 2：更换工单
                        type: 2
                    }
                })
            }, 200);
        },
        back() {
           // this.$router.push('/operaionManage')
           if (this.showTurn) {
               this.closeTurnFn()
           } else {
               history.back(-1)
           }
        },
        inintMeScrollTop() {
            this.fixTop = this.$refs.tabBox.clientHeight
        },
        mescrollInit (mescroll) {
            this.mescroll = mescroll  // 如果this.mescroll对象没有使用到,则mescrollChildInit可以不用配置
            this.mescroll.resetUpScroll(false);
        },
        // 初始化路由传参
        initParams() {
            let params = this.$route.query
            this.deviceId = params.deviceId
            this.departmentId = params.departmentId;
        },
        onMoving(mescroll, rate, downHight ) {
            this.hadDown = true
            let totalBox = document.querySelector('.total_num_view')
            if (downHight > 0 && totalBox) {
                document.querySelector('.downwarp-content').style.display = 'block'
                totalBox.style.display = 'none'
            }
            if (mescroll.downProgressDom) {
                mescroll.downProgressDom.classList.remove('mescroll-rotate');

                var progress = 360 * rate;
                mescroll.downProgressDom.style.webkitTransform = 'rotate(' + progress + 'deg)';
                mescroll.downProgressDom.style.transform = 'rotate(' + progress + 'deg)';
            }
        },
        showTotalNum(mescroll) {
            document.querySelector('.downwarp-content').style.display = 'none'
            let warp = document.getElementsByClassName('my-downwarp-normal')[0]
            let totalBox = document.querySelector('.total_num_view')
            let p = document.createElement('p')
            p.style.marginTop = '15px'
            p.setAttribute('class','total_num_view');
            if (this.isEquals) {
                p.innerHTML =  `已是最新信息`
            } else {
                p.innerHTML =  `已为您加载${this.listData.length}条信息`
            }
            if (totalBox == null) {
                warp.appendChild(p)
            } else {
                if (this.isEquals) {
                    totalBox.innerHTML =  `已是最新信息`
                } else {
                    totalBox.innerHTML = `已为您加载${this.listData.length}条信息`
                }
                totalBox.style.display = 'block'
            }
            return 1000
        },
        switchFn(index) {
            // 显示刷新
            this.showEmpty = false
            this.index = index
            // 重置筛选条件

            // 重置列表数据及页码
            this.mescroll.resetUpScroll(false);
            this.showRefresh = true
        },
        switchServerUrl(index) {
            if (index == 0) {
                return this.$API.checkDeviceOverdueRecordList
            } else {
                return this.$API.checkOverdueRecordList
            }
        },
        //获取部件点巡检可执行记录
        getComponentsCheck(page, mescroll, obj) {
            if (!this.hadDown) {
                this.showRefresh = true
            }
            this.initParams();
            this.index===0?obj.checkTypeList=2:obj.checkTypeList=3
            this.$http(this.$API.getCheckList, obj, true).then((res) => {
                if (page.num === 1) this.listData = []
                if (this.index == 0) {
                    // this.listData = this.listSort(this.listData.concat(res.content));
                    this.listData = this.listData.concat(res.content)
                } else {
                    // this.listData = this.listSort(this.listData.concat(res.content));
                    this.listData = this.listData.concat(res.content)
                }
                this.showRefresh = false;
                if (this.listData.length == 0) {
                    this.showEmpty = true;
                }
                this.$nextTick(() => {
                    this.mescroll.endByPage(res.content.length, res.totalPages)
                })
            })
        },
        upCallback(page, mescroll) {
                this.initParams()
                let obj = {
                    deviceId:this.deviceId,
                    departmentId:this.departmentId,
                    pageNum: page.num,
                    pageSize: page.size,
                    statusList:5,
                }
                setTimeout(() => {
                    this.getComponentsCheck(page, mescroll, obj)
                }, 0);
        },
        listSort(data) {
            console.log("排序前",data);
            let canExecute = [],//状态为可执行的数组
                overdueList = [];//状态为其他的数组

            for(var index in data){
              if(data[index].status == 4){
                var checkRecord = data[index];
                canExecute.push(checkRecord)
              }
              else{
                overdueList.push(data[index]);
              }
            }

            let executeList = [];
            for(var index in canExecute){
              if((canExecute[index].checkLeader).split(',').indexOf(this.userIdNum) != -1){
                executeList.unshift(canExecute[index])
              }else{
                executeList.push(canExecute[index]);
              }
            }

            let overList = [];
            for(var index in overdueList){
              if((overdueList[index].checkLeader).split(',').indexOf(this.userIdNum) != -1){
                overList.unshift(overdueList[index])
              }else{
                overList.push(overdueList[index]);
              }
            }
            data = executeList.concat(overList);
            console.log("排序后",data);
            return data;
        }
    },
}
</script>

<style lang="less" scoped>
    .overdue_box{
        background: #22233F;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow-y: auto;
        .my_dialog{
            position: fixed;
            width: 100%;
            left: 0;
            z-index: 4999;
        }
        .page_header{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 99;
        }
        .tab_box{
            background: #22233F;
            overflow: hidden;
        }
        .mescroll{
            position: fixed;
            bottom: 0;
            height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
        }
        .tab_list{
            padding: 0 16px;
            ul{
                li{
                    margin-top: 12px;
                    background:rgba(41,42,77,1);
                    border-radius:4px;
                    &.active{
                        background:rgba(56,58,105,1);
                    }
                    .desc_box{
                        padding: 8px;
                        height: 80px;
                        box-sizing: border-box;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        border-bottom: 1px solid rgba(255,255,255,0.1);
                        p{
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            word-break: keep-all;
                            &.item_title{
                                font-size: 17px;
                                color: #fff;
                                .tag{
                                    color: #4266d6;
                                    float:right;
                                    font-size:15px;
                                    &.yollow{
                                        color: #DD9710;
                                    }
                                }
                            }
                            &.their{
                                font-size: 14px;
                                color: #fff;
                            }
                            &.time{
                                font-size: 14px;
                                color:rgba(69,109,230,1);
                            }
                        }
                    }
                    .bottom_panel{
                        display: flex;
                        padding: 8px;
                        box-sizing: border-box;
                        .operation_per{
                            width: 45.18%;
                            font-size: 15px;
                            text-align: left;
                            color: #fff;
                            .person{
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }
                        .operation_btn{
                            flex: 1;
                            display: flex;
                            align-items: center;
                            justify-content: flex-end;
                            button{
                                display: inline-block;
                                padding: 1px 27px;
                                border: none;
                                outline: none;
                                font-size: 12px;
                                background:rgba(69,109,230,0.8);
                                border:1px solid rgba(69,109,230,1);
                                border-radius:2px;
                                color: #fff;
                                &.btn_1{
                                    /* background:rgba(41,42,77,1);
                                    border:1px solid rgba(69,109,230,1);
                                    color:rgba(66,102,214,1); */
                                    margin-right: 12px;
                                    &.active{
                                        background:rgba(110,146,255,1);
                                        border:1px solid rgba(110,146,255,1);
                                    }
                                    &.removemargin{
                                        margin-right: 0;
                                    }
                                }
                                &.btn_2{
                                    align-self: flex-end;
                                    &.yellow{
                                        background: #DD9710;
                                        border:1px solid #DD9710;
                                        color: #fff;
                                        padding: 1px 15px;
                                    }
                                    &.active{
                                        background:#EBB44B;
                                        border:1px solid #EBB44B;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .mescroll-empty{
                padding-top: 50px;
                .empty-icon{
                    width: 64px;
                    height: 64px;
                    margin-left: 22px;
                }
                .empty-tip{
                    color: #4F77C0;
                }
            }
            .refresh-warp{
                .refresh-progress{
                    border-width: 2px;
                }
            }
        }
    }
.slide-enter-active, .slide-leave-active{
    transition: all 0.5s ease;
}
.slide-enter,.slide-leave-to{
  transform: translateY(-800px);
  opacity: 0;
}
</style>
<style lang="less">
    .overdue_box{
        .vux-tab-wrap{
            width: 45%;
            position: relative!important;
            padding-top: 30px;
            margin: 67px auto 0;
            .vux-tab-container{
                height: 30px;
                z-index: 0!important;
                .vux-tab{
                    height: 30px;
                    background-color: transparent;
                    .vux-tab-item{
                        font-size: 14px;
                        line-height: 30px;
                        background: transparent;
                        &.vux-tab-selected{
                            font-size: 18px;
                        }
                    }
                }
                .vux-tab-no-animate{
                    .vux-tab-selected{
                        position: relative;
                        border-bottom: none;
                        &:after{
                            position: absolute;
                            content: '';
                            width: 20px;
                            height: 3px;
                            background: #456de6;
                            left: 50%;
                            bottom: 0;
                            transform: translate(-50%, 0);
                        }
                    }
                }
            }
        }
        .refresh-warp{
            .refresh-progress{
                border-width: 2px!important;
            }
        }
    }
</style>
